<template>
  <div class="app">
    <h2>Sum1: {{ sum1 }}</h2>
    <h2>Sum2: {{ sum2 }}</h2>
    <h2>Car1 Info: {{ car1 }}</h2>
    <h2>Car2 Info: {{ car2 }}</h2>
    <button @click="changeSum1">sum1 + 1</button>
    <button @click="changeSum2">sum2 + 1</button>
    <button @click="changeBrand1">change brand1</button>
    <button @click="changeColor1">change color1</button>
    <button @click="changePrice1">change price1</button>
    <button @click="changeBrand2">change brand2</button>
    <button @click="changeColor2">change color2</button>
    <button @click="changePrice2">change price2</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import { ref, readonly, reactive, shallowReadonly } from 'vue';

  let sum1 = ref(0)
  let sum2 = readonly(sum1)
  let car1 = reactive({
    brand: 'Banz',
    options: {
      color: 'red',
      price: 100
    }
  })
  let car2 = shallowReadonly(car1)

  function changeSum1() {
    sum1.value += 1
  }
  function changeSum2() {
    sum2.value += 1
  }

  function changeBrand1() {
    car1.brand = 'Bmw'
  }
  function changeColor1() {
    car1.options.color = 'black'
  }

  function changePrice1() {
    car1.options.price += 10
  }
  function changeBrand2() {
    car2.brand = 'Bmw'
  }
  function changeColor2() {
    car2.options.color = 'black'
  }

  function changePrice2() {
    car2.options.price += 10
  }
</script>

<style scoped>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px
  }
  button {
    margin: 5px;
  }
</style>